<%--
  Created by IntelliJ IDEA.
  User: Douliusuo
  Date: 2022/5/1
  Time: 19:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>查询员工信息</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/public.css" media="all">
  </head>
  <body>
    <div class="layuimini-container">
      <div class="layuimini-main">

        <fieldset class="table-search-fieldset">
          <legend>搜索员工信息</legend>
          <div style="margin: 10px 10px 10px 10px">
            <form class="layui-form layui-form-pane" action="">
              <div class="layui-form-item">
                <div class="layui-inline">
                  <label class="layui-form-label">员工编号</label>
                  <div class="layui-input-inline">
                    <input type="text" name="username" autocomplete="off" class="layui-input">
                  </div>
                </div>
                <div class="layui-inline">
                  <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                </div>
              </div>
            </form>
          </div>
        </fieldset>
        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
      </div>
    </div>
    <script src="${pageContext.request.contextPath}/layui/layui.js" charset="utf-8"></script>
    <script>
      layui.use(['form', 'table'], function () {
        var $ = layui.jquery,
                form = layui.form,
                table = layui.table;

        table.render({
          // 找到table 元素进行 数据的填充
          elem: '#currentTableId',
          url: '${pageContext.request.contextPath}/emp/searchEmp',
          toolbar: '#toolbarDemo',
          defaultToolbar: ['filter', 'exports', 'print', {
            title: '提示',
            layEvent: 'LAYTABLE_TIPS',
            icon: 'layui-icon-tips'
          }],
          cols: [[
            {field: 'empno', width: 150, title: '员工编号', sort: true},
            {field: 'ename', width: 150, title: '员工姓名'},
            {field: 'job', width: 150, title: '员工职位', sort: true},
            {field: 'mgr', width: 150, title: '上司编号'},
            {field: 'sal', width: 150,title: '员工薪资'},
            {field: 'hiredate', width: 180, title: '入职日期', minWidth: 150,sort: true},
            {field: 'comm', width: 150, title: '年终奖金', sort: true},
            {field: 'deptno', width: 150, title: '部门编号'},
            {title: '操作', minWidth: 100, toolbar: '#currentTableBar', align: "center"}
          ]],
          limits: [10, 15, 20, 25, 50, 100],
          limit: 15,
          page: true,
          skin: 'line'
        });

        // 监听搜索操,搜索的逻辑在这里完成

        form.on('submit(data-search-btn)', function (data) {
          var result = JSON.stringify(data.field);
          // ajax 异步请求书局
          $.ajax({
            // 数据请求地址
            url: '${pageContext.request.contextPath}/emp/searchEmp',
            data: {
              // 传递值
              empno: data.field,
              // 请求成功后的回调函数,
              success: function (res) {
                // 重新渲染表格
                table.reload('currentTableId', {
                  //弹出搜索完成提示
                  layerTips: '搜索完成',
                });
              }
            }
          });
          layer.alert(result, {
            title: '最终的搜索信息'
          });

          //执行搜索重载
          table.reload('currentTableId', {
            page: {
              curr: 1
            }
            , where: {
              searchParams: result
            }
          }, 'data');

          return false;
        });

        //监听表格复选框选择,注意监听的是前面的复选框
        table.on('checkbox(currentTableFilter)', function (obj) {
          console.log(obj)
        });
      });
    </script>
  </body>
</html>